<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报修评价列表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --success-color: #4cc9f0;
            --warning-color: #f8961e;
            --danger-color: #f94144;
            --light-bg: #f8f9fa;
        }

        body {
            background-color: var(--light-bg);
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        .evaluation-container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 15px;
        }

        .page-header {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .page-title {
            color: var(--secondary-color);
            font-weight: 600;
            margin-bottom: 5px;
        }

        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .filter-group {
            margin-bottom: 15px;
        }

        .filter-label {
            font-weight: 500;
            margin-bottom: 8px;
            color: #495057;
        }

        .evaluation-card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
            border-left: 4px solid var(--primary-color);
        }

        .evaluation-card:hover {
            transform: translateY(-3px);
        }

        .evaluation-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            align-items: center;
        }

        .repair-title {
            font-weight: 600;
            color: #212529;
            font-size: 18px;
        }

        .rating-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: 500;
            font-size: 14px;
        }

        .rating-5 {
            background: rgba(76, 201, 240, 0.1);
            color: var(--success-color);
        }

        .rating-4 {
            background: rgba(67, 97, 238, 0.1);
            color: var(--primary-color);
        }

        .rating-3 {
            background: rgba(248, 150, 30, 0.1);
            color: var(--warning-color);
        }

        .rating-2 {
            background: rgba(249, 65, 68, 0.1);
            color: var(--danger-color);
        }

        .rating-1 {
            background: rgba(108, 117, 125, 0.1);
            color: #6c757d;
        }

        .evaluation-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            color: #6c757d;
            font-size: 14px;
        }

        .meta-icon {
            margin-right: 5px;
            color: var(--primary-color);
        }

        .star-rating {
            color: #ffc107;
            margin-right: 5px;
        }

        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }

        .tag {
            padding: 4px 10px;
            background: #f1f3f5;
            border-radius: 15px;
            font-size: 12px;
            color: #495057;
        }

        .evaluation-content {
            color: #495057;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .evaluation-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #6c757d;
            font-size: 13px;
            border-top: 1px solid #f1f3f5;
            padding-top: 15px;
        }

        .pagination {
            justify-content: center;
            margin-top: 30px;
        }

        .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .page-link {
            color: var(--primary-color);
        }

        .empty-state {
            text-align: center;
            padding: 50px 0;
            color: #6c757d;
        }

        .empty-icon {
            font-size: 60px;
            color: #dee2e6;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div class="evaluation-container">
    <div class="page-header">
        <h1 class="page-title">报修评价列表</h1>
        <p class="text-muted">查看所有用户的报修服务评价</p>
    </div>

    <div class="filter-section">
        <div class="row">
            <div class="col-md-4">
                <div class="filter-group">
                    <label class="filter-label">评分筛选</label>
                    <select class="form-select" id="rating">
                        <option value="">全部评分</option>
                        <option value="5">★★★★★ 非常满意</option>
                        <option value="4">★★★★ 满意</option>
                        <option value="3">★★★ 一般</option>
                        <option value="2">★★ 不满意</option>
                        <option value="1">★ 非常差</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="filter-group">
                    <label class="filter-label">报修类型</label>
                    <select class="form-select" id="description">
                        <option value="" >全部类型</option>
                        <option value="水管">水管维修</option>
                        <option value="电路">电路维修</option>
                        <option value="家具">家具维修</option>
                        <option value="其他">其他维修</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="filter-group">
                    <label class="filter-label">时间范围</label>
                    <select class="form-select" id="time">
                        <option value="">全部时间</option>
                        <option value="7">最近7天</option>
                        <option value="30">最近30天</option>
                        <option value="90">最近3个月</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <button class="btn btn-primary">筛选</button>
                <button class="btn btn-outline-secondary ms-2">重置</button>
                <button class="btn btn-success ms-2" onclick="location.href='repair_evaluationAdd.jsp'">评价</button>
            </div>
        </div>
    </div>

</div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    var currentPage = 0;
    var totalPages = 1;

    // 页面加载完成后初始化数据
    $(document).ready(function() {
        loadData();
        
        
        // 筛选按钮点击事件 - 修改为以下代码
        $(".btn-primary").click(function() {
            currentPage = 0; // 重置到第一页
            loadData();
        });
        
        // 重置按钮点击事件
        $(".btn-outline-secondary").click(function() {
            $("#rating, #description, #time").val("");
            currentPage = 0; // 重置到第一页
            loadData();
        });
    });

    // 加载数据函数
    function loadData(page) {
        var rating = $("#rating").val();
        var description = $("#description").val();
        var time = $("#time").val();
        currentPage = page || 0;

        $.get("<%=request.getContextPath()%>/evaluationController", {
            op: "query",
            rating: rating,
            description: description,
            time: time,
            page: currentPage
        }, function(data) {
            updateTable(data);
        });
    }

    // 更新表格数据
    function updateTable(data) {
        var jsonData = JSON.parse(data);
        var html = "";

        if (jsonData.list && jsonData.list.length > 0) {
            $.each(jsonData.list, function(index, eval) {
                html += '<div class="evaluation-card">' +
                    '<div class="evaluation-header">' +
                    '<div class="repair-title">' + eval.description + '</div>' +
                    '<div class="rating-badge rating-' + eval.rating + '">' +
                    getRatingStars(eval.rating) +
                    '</div>' +
                    '</div>' +
                    '<div class="evaluation-meta">' +
                    '<div class="meta-item"><i class="fas fa-user meta-icon"></i> ' + eval.nickname + '</div>' +
                    '<div class="meta-item"><i class="fas fa-calendar-alt meta-icon"></i> ' + eval.evaluationTime + '</div>' +
                    '<div class="meta-item"><i class="fas fa-user-cog meta-icon"></i> ' + "李师傅" + '</div>' +
                    '</div>';

                if (eval.tags && eval.tags.length > 0) {
                    html += '<div class="tag-container">';
                    $.each(eval.tags.split(','), function(i, tag) {
                        html += '<span class="tag">' + tag + '</span>';
                    });
                    html += '</div>';
                }

                html += '<div class="evaluation-content">' + eval.content+eval.evaluationTags + '</div>' +
                    '<div class="evaluation-footer">' +
                    '<div><span class="text-muted">评价ID: ' + eval.id + '</span></div>' +
                   '<div><button class="btn btn-sm btn-outline-primary" onclick="viewDetail(\'' + 
    eval.id + '\',\'' + 
    encodeURIComponent(eval.description) + '\',\'' + 
    encodeURIComponent(eval.nickname) + '\',\'' + 
    encodeURIComponent(eval.content) + '\',\'' + 
    eval.evaluationTime + '\',\'' + 
    eval.rating + '\',\'' + 
    encodeURIComponent(eval.evaluationTags) +
    '\')">查看详情</button></div>' +
                    '</div>' +
                    '</div>';
            });
            $(".empty-state").remove();
            $(".evaluation-container").find(".evaluation-card").remove();
            $(".evaluation-container").append(html);

            // 更新分页信息
            currentPage = jsonData.page;
            totalPages = jsonData.totalPages;
            updatePagination();
        } else {
            //只显示一个evaluation-card，内容为空
            $(".evaluation-card").remove();
            $(".evaluation-container").append(
                '<div class="empty-state">' +
                '<h4>暂无评价数据</h4>' +
                '<p class="text-muted">当前没有符合条件的评价记录</p>' +
                '</div>'
            );
            
            // 重置分页信息
            currentPage = 0;
            totalPages = 1;
            updatePagination();
        }
    }

   // 添加查看详情函数
function viewDetail(id, description, nickname, content, evaluationTime, rating, evaluationTags) {
    window.location.href = "<%=request.getContextPath()%>/repair/repair_evaluationDetail.jsp?" + 
        "id=" + id + 
        "&description=" + description + 
        "&nickname=" + nickname + 
        "&content=" + content + 
        "&evaluationTime=" + evaluationTime + 
        "&rating=" + rating + 
        "&evaluationTags=" + evaluationTags;
}


    // 辅助函数：根据评分生成星标
    function getRatingStars(rating) {
        var stars = '';
        for (var i = 0; i < 5; i++) {
            stars += i < rating ? '★' : '☆';
        }
        return stars;
    }

    // 辅助函数：格式化日期
    function formatDate(dateStr) {
        // 这里可以根据实际日期格式进行调整
        return dateStr;
    }

    // 更新分页控件
    function updatePagination() {
        var paginationHtml = '<nav aria-label="Page navigation">' +
            '<ul class="pagination">' +
            '<li class="page-item ' + (currentPage <= 0 ? 'disabled' : '') + '">' +
            '<a class="page-link" href="#" onclick="loadData(' + (currentPage - 1) + ')" aria-label="Previous">' +
            '<span aria-hidden="true">&laquo;</span>' +
            '</a>' +
            '</li>';

        // 显示最多5个页码
        var startPage = Math.max(0, currentPage - 2);
        var endPage = Math.min(totalPages - 1, currentPage + 2);

        for (var i = startPage; i <= endPage; i++) {
            paginationHtml += '<li class="page-item ' + (i === currentPage ? 'active' : '') + '">' +
                '<a class="page-link" href="#" onclick="loadData(' + i + ')">' + (i + 1) + '</a>' +
                '</li>';
        }

        paginationHtml += '<li class="page-item ' + (currentPage >= totalPages - 1 ? 'disabled' : '') + '">' +
            '<a class="page-link" href="#" onclick="loadData(' + (currentPage + 1) + ')" aria-label="Next">' +
            '<span aria-hidden="true">&raquo;</span>' +
            '</a>' +
            '</li>' +
            '</ul>' +
            '</nav>';

        $(".pagination").html(paginationHtml);
    }
</script>
</body>
</html>